<template>
	<view class="apply-card">
		<!-- 卡片头部：申请人信息 -->
	
		<view class="card-header">
			<image v-if="msg.nicPic.url" :src="msg.nicPic.url || '/static/groupLogo.png'" class="avatar" mode="widthFix"></image>
			<avatar-fallback v-else :name="msg.nicName "></avatar-fallback>
			<view class="user-info">
				<view class="nickname">{{ msg.nicName || '未知用户' }}</view>
				<view class="apply-time">{{formatMessageTime(msg.timestamp)}}</view>
			</view>
		</view>

		<!-- 卡片主体：申请留言 -->
		<view class="card-body">
			<view class="apply-text">
				<text class="prefix">留言：</text>
				<text class="content">{{ msg.content.text || '对方未填写留言' }}</text>
			</view>
		</view>

		<!-- 卡片底部：操作按钮 -->
		<view class="card-footer" v-if="isFriend===0&&!isSelf">
			<button class="btn reject-btn"  @click="handleAccept(false)">拒绝</button>
			<button class="btn accept-btn" @click="handleAccept(true)">接受</button>
		</view>
		<view class="card-footer" v-else>
			 <text class="card-footer-text">{{stataMap[isFriend]||'已过期'}}</text>
		</view>
	</view>
</template>

<script>
const friend = uniCloud.importObject('friend',{customUI:true});
import formatMessageTime from '../../utils/formatMessageTime';
import AvatarFallback from '../AvatarFallback.vue';
export default {
	name: 'applyFriend',
	components:{
		AvatarFallback
	},
	
	props: {
		msg: {
			type: Object,
			default: () => ({})
		}
	},
	data(){
		return{
			isFriend:null,
			stataMap:{
				0:'等待好友通过',
				1:'已加为好友',
				2:'已拉黑',
				3:'已删除'
			}
			
		}
	},
	computed:{
		user(){
			return this.$store.state.msg.user
		},
		isSelf(){
			return this.$store.state.msg.user.userId===this.msg.sendUserId
		}
	},
	watch: {
		msg: {
			handler(newmsg) {
				console.log('收到好友邀请信息', newmsg);
			}
		}
	},
	mounted() {
		this.getIsFriend()
	},
	methods: {
		formatMessageTime,
		// 接受好友申请
		async handleAccept(e) {
			
			const agree = e;
			const userId=this.user.userId
			const friendUserId=this.msg.sendUserId===this.user.userId?this.msg.toTarget.targetId:this.msg.sendUserId
			const res = await friend.handleApply({userId, friendUserId, agree });
			if (res.success) {
				uni.showToast({
					title: res.message,
					duration: 2000,
					position: 'center'
				});
				this.$emit("Refresh")
			} else {
				uni.showToast({
					title:res.message,
					icon: 'fail'
				});
			}
		},
	async getIsFriend(){
		try{
			const friendUserId = this.msg.sendUserId===this.user.userId?this.msg.toTarget.targetId:this.msg.sendUserId
			console.log('对方好友Id',friendUserId);
		    const userId=this.user.userId
		   const res=await  friend.isFriend({userId:userId, targetUserId:friendUserId})
		   console.log("返回的朋友关系",res);
		   if(res.success){
			   this.isFriend=res.data.status
		   }
		   
		}catch(e){
			console.log(e);
		}
	
			console.log("好友情况",this.isFriend);
	
		}
		
	}
};
</script>

<style lang="scss">
.apply-card {
	width: 80%;
	margin: 16rpx auto;
	padding: 24rpx;
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 轻微阴影提升层次感

	// 头部信息
	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			background-color: #f5f5f5; // 占位背景
		}

		.user-info {
			flex: 1;
            display: flex;
			align-items: center;
			gap:20rpx;
			.nickname {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				line-height: 1.4;
			}

			.apply-time {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	// 申请留言
	.card-body {
		padding: 10rpx 0;
		border-top: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;

		.apply-text {
			font-size: 28rpx;
			line-height: 1.6;

			.prefix {
				color: #666;
			}

			.content {
				color: #333;
			}
		}
	}

	// 操作按钮
	.card-footer {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		margin-top: 24rpx;

		.btn {
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 28rpx;
			border-radius: 32rpx;
			padding: 0;
		}

		.reject-btn {
			background-color: #f5f5f5;
			color: #666;
		}

		.accept-btn {
			background-color: #007aff;
			color: #fff;
		}
	}
}
</style>
